<template>
  <div class="personal-charts">
    <el-row :gutter="20" style="margin-bottom: 20px;">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="chart-header">
              <span>类别价值分布</span>
              <el-tag type="success">资产类-价值贡献</el-tag>
            </div>
          </template>
          <div ref="categoryPieRef" style="height: 300px;"></div>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="chart-header">
              <span>完成度评级分布</span>
              <el-tag type="warning">损益类-质量分布</el-tag>
            </div>
          </template>
          <div ref="ratingBarRef" style="height: 300px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="chart-header">
              <span>每日净值趋势</span>
              <el-tag type="info">综合净值曲线</el-tag>
            </div>
          </template>
          <div ref="dailyNetRef" style="height: 360px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue'
import * as echarts from 'echarts'

export default {
  name: 'PersonalCharts',
  props: {
    categoryValues: { type: Array, default: () => [] }, // [{ name, value }]
    ratingCounts: { type: Array, default: () => [] },   // [{ rating, count }]
    dailyNetSeries: { type: Array, default: () => [] }  // [{ date, value }]
  },
  setup(props) {
    const categoryPieRef = ref(null)
    const ratingBarRef = ref(null)
    const dailyNetRef = ref(null)
    let charts = {}

    const renderCategoryPie = () => {
      if (!categoryPieRef.value) return
      const chart = charts.categoryPie || echarts.init(categoryPieRef.value)
      charts.categoryPie = chart
      chart.setOption({
        tooltip: { trigger: 'item' },
        legend: { top: 'bottom' },
        series: [{
          name: '类别价值',
          type: 'pie',
          radius: '60%',
          data: (props.categoryValues || []).map(x => ({ name: x.name, value: Number(x.value?.toFixed?.(2) || x.value) })),
          emphasis: { itemStyle: { shadowBlur: 8, shadowOffsetX: 0, shadowColor: 'rgba(0,0,0,0.3)' } }
        }]
      })
    }

    const renderRatingBar = () => {
      if (!ratingBarRef.value) return
      const chart = charts.ratingBar || echarts.init(ratingBarRef.value)
      charts.ratingBar = chart
      const labels = (props.ratingCounts || []).map(x => String(x.rating))
      const values = (props.ratingCounts || []).map(x => x.count)
      chart.setOption({
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: labels, name: '评级' },
        yAxis: { type: 'value', name: '次数' },
        series: [{
          type: 'bar',
          data: values,
          itemStyle: { color: '#409EFF' }
        }]
      })
    }

    const renderDailyNet = () => {
      if (!dailyNetRef.value) return
      const chart = charts.dailyNet || echarts.init(dailyNetRef.value)
      charts.dailyNet = chart
      const dates = (props.dailyNetSeries || []).map(x => x.date)
      const values = (props.dailyNetSeries || []).map(x => Number(x.value?.toFixed?.(2) || x.value))
      chart.setOption({
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: dates },
        yAxis: { type: 'value', name: '净值' },
        series: [{ type: 'line', data: values, smooth: true }]
      })
    }

    const renderAll = () => {
      renderCategoryPie()
      renderRatingBar()
      renderDailyNet()
    }

    const disposeAll = () => {
      Object.values(charts).forEach(c => c && c.dispose())
      charts = {}
    }

    watch(() => [props.categoryValues, props.ratingCounts, props.dailyNetSeries], async () => {
      await nextTick()
      renderAll()
    }, { deep: true })

    onMounted(async () => {
      await nextTick()
      renderAll()
      window.addEventListener('resize', handleResize)
    })

    const handleResize = () => {
      Object.values(charts).forEach(c => c && c.resize())
    }

    onUnmounted(() => {
      window.removeEventListener('resize', handleResize)
      disposeAll()
    })

    return { categoryPieRef, ratingBarRef, dailyNetRef }
  }
}
</script>

<style scoped>
.personal-charts { margin-top: 10px; }
.chart-header { display: flex; align-items: center; justify-content: space-between; }
</style>